<template>
  <el-menu
    default-active="$route.path"
    class="sidebar-container"
    :collapse="isCollapse"
    background-color="#304156"
    text-color="#bfcbd9"
    active-text-color="#409EFF"
    router
  >
    <!-- LOGO -->
    <div class="logo">
      <img src="@/assets/images/logo.jpg" alt="Logo" class="logo-img" />
      <span v-show="!isCollapse" class="logo-text">全都有超市</span>
    </div>

    <!-- 导航菜单 -->
    <el-menu-item index="/admin/dashboard">
      <i class="el-icon-house"></i>
      <span>首页</span>
    </el-menu-item>

    <el-sub-menu index="product">
      <template #title>
        <i class="el-icon-shopping-cart-full"></i>
        <span>商品管理</span>
      </template>
      <el-menu-item index="/products/list">商品列表</el-menu-item>
      <el-menu-item index="/products/categories">商品分类</el-menu-item>
      <el-menu-item index="/products/types">商品标签</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="order">
      <template #title>
        <i class="el-icon-document"></i>
        <span>订单管理</span>
      </template>
      <el-menu-item index="/orders/list">订单列表</el-menu-item>
      <el-menu-item index="/orders/detail">订单详情</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="user">
      <template #title>
        <i class="el-icon-user-solid"></i>
        <span>管理员管理</span>
      </template>
      <el-menu-item index="/users/list">管理列表</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="setting">
      <template #title>
        <i class="el-icon-setting"></i>
        <span>系统设置</span>
      </template>
      <el-menu-item index="/settings/profile">个人资料</el-menu-item>
    </el-sub-menu>

    <!-- 折叠按钮 -->
    <div class="toggle-button" @click="toggleCollapse">
      <i :class="isCollapse ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i>
    </div>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false
    };
  },
  methods: {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    }
  }
};
</script>

<style scoped lang="less">
.sidebar-container {
  height: 100%;
  width: 240px;
  transition: width 0.3s;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;

  &.el-menu--collapse {
    width: 64px;
  }

  .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    background-color: #2b2f3a;
    color: white;
    font-size: 18px;
    font-weight: bold;
    overflow: hidden;
    transition: all 0.3s ease;

    .logo-img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 10px;
    }

    .logo-text {
      white-space: nowrap;
    }
  }

  .el-menu-item,
  .el-submenu__title {
    font-size: 16px;
    height: 56px;
    line-height: 56px;
  }

  .el-submenu .el-menu-item {
    min-width: 240px;
    padding-left: 60px !important;
  }

  .toggle-button {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    color: #bfcbd9;
    font-size: 16px;
    text-align: center;
    padding: 10px;
    border-radius: 4px;
    background-color: #2b2f3a;
    transition: all 0.3s ease;

    &:hover {
      background-color: #1f2d3d;
    }
  }
}
</style>